<script setup lang="ts">
import {
  reactive,
  ref,
  onMounted,
  defineExpose,
  defineProps,
  defineEmits
} from "vue";
import { getComanyTreeInfo } from "@/api/empower";

//机构

const props = defineProps({});
let treeRef = ref(null);
let checKay = ref([]);
let checName = ref([]);
let dialogTree = ref(false);
let loading = ref(false);
let treeData = ref([
  {
    id: 1,
    label: "Level one 1",
    children: [
      {
        id: 4,
        label: "Level two 1-1",
        children: [
          {
            id: 9,
            label: "Level three 1-1-1"
          },
          {
            id: 10,
            label: "Level three 1-1-2"
          }
        ]
      }
    ]
  },
  {
    id: 2,
    label: "Level one 2",
    children: [
      {
        id: 5,
        label: "Level two 2-1"
      },
      {
        id: 6,
        label: "Level two 2-2"
      }
    ]
  },
  {
    id: 3,
    label: "Level one 3",
    children: [
      {
        id: 7,
        label: "Level two 3-1"
      },
      {
        id: 8,
        label: "Level two 3-2"
      }
    ]
  }
]);
const defaultProps = {
  children: "children",
  label: "comCname",
  value: "comCode"
};
//初始化
const getgetComanyTreeInfo = async () => {
  let res = await getComanyTreeInfo();
  if (res.code == 200) {
    treeData.value = res.data;
  } else {
    treeData.value = [];
  }
};
const confirmBtn = () => {
  dialogTree.value = false;
  treeData.value = [];
  checKay.value = [];
  checName.value = [];
};
const getCurrentNodes = (data, checked) => {
  console.log(data, checked);
  if (checked.checkedNodes.length > 0) {
    checKay.value = [];
    checName.value = [];
    checked.checkedNodes.forEach(node => {
      console.log(node);

      checName.value.push(node.comCname);
      checKay.value.push(node.comCode);
    });
  } else {
    checKay.value = [];
    checName.value = [];
  }
  console.log(checKay.value);
  console.log(checName.value);
};
const emit = defineEmits(["cropper"]);
const btnHandle = () => {
  emit("cropper", { checKay: checKay.value, checName: checName.value });
  dialogTree.value = false;
};
defineExpose({
  dialogTree,
  checKay,
  checName,
  treeRef,
  getgetComanyTreeInfo
});
</script>

<template>
  <div class="treeInfo">
    <el-dialog
      title=""
      v-model="dialogTree"
      width="400px"
      style="min-height: 400px"
    >
      <div v-show="!loading">
        <el-tree
          ref="treeRef"
          :data="treeData"
          node-key="comCode"
          :props="defaultProps"
          :show-checkbox="true"
          highlight-current
          @check="getCurrentNodes"
          :default-checked-key="checKay"
        ></el-tree>
      </div>
      <template #footer>
        <el-button type="primary" @click="btnHandle">确认</el-button>
        <el-button @click="confirmBtn">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>
